<template>
  <div id="loginbg">
      <el-row class="loginView">          
         <el-tabs value="first"  type="border-card" >
            <el-tab-pane  label="客户端" name="first">
                <div class="loginTitle">客户端登录</div>
                 <el-form ref="khdform" :model="khdform" :rules="rule" >
                     <el-form-item prop="name">
                         <el-input placeholder="请输入客户端用户名" v-model="khdform.name"></el-input>
                     </el-form-item>
                     <el-form-item prop="pw">
                         <el-input placeholder="请输入客户端密码" v-model="khdform.pw"></el-input>
                     </el-form-item>
                 <el-form-item>
                    <el-button type="success" @click="submitForm('khdform')" round>登录</el-button>
                </el-form-item>
                </el-form>
            </el-tab-pane>
    <el-tab-pane  label="运输端" name="second">
        <div class="loginTitle">运输端</div>
       <el-form ref="ysdform" :model="ysdform" :rules="rule" >
                     <el-form-item prop="name">
                         <el-input placeholder="请输入运输端用户名" v-model="ysdform.name"></el-input>
                     </el-form-item>
                     <el-form-item prop="pw">
                         <el-input placeholder="请输入运输端密码" v-model="ysdform.pw"></el-input>
                     </el-form-item>
                 <el-form-item>
                    <el-button type="success" @click="submitForm('ysdform')" round>登录</el-button>
                </el-form-item>
                </el-form>
    </el-tab-pane>
    <el-tab-pane label="承运商" name="third">
        <div class="loginTitle">承运商</div>
       <el-form ref="cysform" :model="cysform" :rules="rule" >
                     <el-form-item prop="name">
                         <el-input placeholder="请输入承运商用户名" v-model="cysform.name"></el-input>
                     </el-form-item>
                     <el-form-item prop="pw">
                         <el-input placeholder="请输入承运商密码" v-model="cysform.pw"></el-input>
                     </el-form-item>
                 <el-form-item>
                    <el-button type="success" @click="submitForm('cysform')" round>登录</el-button>
                </el-form-item>
                </el-form>
    </el-tab-pane>
    <el-tab-pane label="客户端注册" name="fourth">
        <div class="loginTitle">客户端注册</div>
         <el-form ref="zhucform" :model="zhucform" :rules="rule" >
                     <el-form-item prop="name">
                         <el-input placeholder="请输入用户名" v-model="zhucform.name"></el-input>
                     </el-form-item>
                     <el-form-item prop="pw">
                         <el-input placeholder="请输入密码" v-model="zhucform.pw"></el-input>
                     </el-form-item>
                 <el-form-item>
                    <el-button type="primary" @click="submitForm('zhucform')" round>注册</el-button>

                </el-form-item>
                </el-form>
        
    </el-tab-pane>
        </el-tabs>

      </el-row>

  </div>
</template>

<script>
export default {
 name: "login",
  data () {
    return {
        khdform:{
            name:'',
            pw:''
        },
        cysform:{
            name:'',
            pw:''
        },
        ysdform:{
            name:'',
            pw:''
        },
        zhucform:{
            name:'',
            pw:''
        },
        //规则
         rule:{
             //prop对应的规则属性 
             name: [
               { required: true, message: '请输入用户名', trigger: 'blur' },
               {
                        required: true,
                        pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
                        message: '用户名必须是字母和数字组成,且6-12位',
                        trigger: 'blur'
               }
          ],
          pw: [
              { required: true, message: '请输入密码', trigger: 'blur' },
               {
                        required: true,
                        pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
                        message: '密码必须是字母和数字组成,且6-12位',
                        trigger: 'blur'
               }
             
          ]
         },

    };
  },
 

  methods:{
      //登录注册时 验证 当前表单 是否符合规则 
      submitForm(formName) {
        //validate 表单验证的方法 refs不能重名
        this.$refs[formName].validate((valid) => {
          if (valid) {
              //前端规则成功可发送后端请求 验证用户名和密码
              //用ref属性的_uid判断 是登录还是注册
                if(this.$refs[formName]._uid!=this.$refs.zhucform._uid){
                    //三端登录请求
                    console.log('三端登录');
                }else{
                    //注册请求
                    console.log('注册');
                }
          } else {
              //规则错误 弹出错误信息
            console.log('error submit!!');
            return false;
          }
        });
      }
  }
}

</script>
<style scoped  lang="less">
*{
    padding: 0;
    margin: 0;
    
}
.el-tabs{
    background-color: rgba(255,255,255,0.5);
    border: none;
}
#loginbg{
    height: 100vh;
    background: url(../assets/img/loginbg.png);
}

    .loginView{
        margin: 0 auto;
        padding-top: 140px;
        width: 400px;
        height: 600px;
    }
    .loginTitle{
    color: #409EFF;
    font-weight: bold;
}
    .el-form-item{
        margin-top: 40px;
    
       text-align: center;
    }
</style>